<template>
  <div>
    <!-- 渠道订单量 -->
    <line-stack
      name="countOrderLineData"
      :data="countOrderLineData"
      :extend="{ title: '渠道订单量' }"
    />
    <div class="list">
      <div class="list-lt">
        <line-stack
          name="countOrderLineAddData"
          :data="countOrderLineAddData"
          :extend="{ title: '订单增长图' }"
        />
      </div>
      <div class="list-rt">
        <div class="list-rt-num">
          <p>抖音</p>
          <span>{{ add.douyin }}</span>
        </div>
        <div class="list-rt-num">
          <p>京东</p>
          <span>{{ add.jindong }}</span>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="list-lt">
        <line-stack
          name="countOrderLineAddData"
          :data="countOrderLineAddData"
          :extend="{ title: '退款订单统计' }"
        />
      </div>
      <div class="list-rt">
        <div class="list-rt-num">
          <p>抖音</p>
          <span>{{ cancel.douyin }}</span>
        </div>
        <div class="list-rt-num">
          <p>京东</p>
          <span>{{ cancel.jindong }}</span>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="list-lt">
        <line-stack
          name="countOrderLineAddData"
          :data="countOrderLineAddData"
          :extend="{ title: '退款订单金额' }"
        />
      </div>
      <div class="list-rt">
        <div class="list-rt-num">
          <p>抖音</p>
          <span>{{ money.douyin }}</span>
        </div>
        <div class="list-rt-num">
          <p>京东</p>
          <span>{{ money.jindong }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import lineStack from '@c/echarts/line-stack'
export default {
  components: {
    lineStack,
  },
  data() {
    return {
      countOrderLineData: { categories: [], series: [] },
      countOrderLineAddData: { categories: [], series: [] },
      add: { douyin: '', jindong: '' },
      countCancelOrderLineAddData: { categories: [], series: [] },
      cancel: { douyin: '', jindong: '' },
      countCancelMoneyLineAddData: { categories: [], series: [] },
      money: { douyin: '', jindong: '' },
    }
  },
  created() {
    this.countOrderLineDataList()
    this.countOrderLineList(
      '/count/bigscreent4/countOrderLineAddData',
      'countOrderLineAddData',
      '订单增长图'
    )
    this.countOrderList('/count/bigscreent4/countOrderAddData', 'add')
    this.countOrderLineList(
      '/count/bigscreent4/countCancelOrderLineAddData',
      'countCancelOrderLineAddData',
      '退款订单统计'
    )
    this.countOrderList('/count/bigscreent4/countCancelOrderAddData', 'cancel')
    this.countOrderLineList(
      '/count/bigscreent4/countCancelMoneyLineAddData',
      'countCancelMoneyLineAddData',
      '退款订单金额'
    )
    this.countOrderList('/count/bigscreent4/countCancelMoneyAddData', 'money')
  },
  methods: {
    countOrderLineDataList() {
      //渠道订单量
      this.$axios.get('/count/bigscreent4/countOrderLineData').then((data) => {
        this.countOrderLineData = { categories: [], series: [] }
        if (data.code == 200) {
          this.countOrderLineData = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    countOrderLineList(url, type, name) {
      this.$axios.get(url).then((data) => {
        this[type] = { categories: [], series: [] }
        if (data.code == 200) {
          const categories = [],
            series = []
          data.data.forEach((element) => {
            categories.push(element.name)
            series.push(element.value)
          })
          this[type] = {
            categories: categories,
            series: [
              {
                name: name,
                data: series,
              },
            ],
          }
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    countOrderList(url, type) {
      this.$axios.get(url).then((data) => {
        this[type] = { douyin: '', jindong: '' }
        if (data.code == 200) {
          let { douyin, jindong } = data.data
          this[type].douyin = douyin.value
          this[type].jindong = jindong.value
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.list {
  display: flex;
  margin-top: 30px;
  &-lt {
    flex: 1;
  }
  &-rt {
    width: 300px;
    &-num {
      border-radius: 4px;
      border: 1px solid #ebeef5;
      color: #303133;
      padding: 15px 25px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin-top: 35px;
      p {
        font-size: 16px;
        font-weight: 400;
        color: #b1b1b1;
      }
      span {
        display: block;
        font-size: 32px;
        font-weight: 400;
        color: #000000;
        margin: 10px 0;
      }
    }
  }
}
</style>
